<template>
  <div class="realtime">
    <div class="content-box">
      <h2>领用信息</h2>
      <div class="content-center" >
        <div class="list-box" v-for="(item,index) in contrasList" :key="index" @mouseover="aa(index)" :class="isborder == index?'isborder':''" @click="changeDetail(item.comparatorMn)">
          <img :src="item.img" alt />
          <div class="list-boot">
            <p class="contrasname" :title=item.comparatorName>{{item.comparatorName}}对比仪</p>
            <div class="address-box">
              <p>型号：</p>
              <p>{{item.comparatorMn}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="page-box">
          <a-pagination
              :show-total="total => `共 ${total} 条记录`"
              v-model="current"
              :total="total"
              :defaultPageSize="size"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      current: 1,
      size:21,
      total:0,
      isborder:"",
      contrasList:[], //领用记录列表
      userId:''
    };
  },
  methods: {
    getId(){
      this.userId = this.$user.id
    },
    // 获取领用信息
    getList(){
      this.$api.PostlistRecipientsInformation({
        currentPage:this.current,
        pageSize:this.size,
        userId:this.userId
      }).then((res) =>{
        console.log(res)
        this.contrasList = res.data.data.records;
        this.total = res.data.data.total
      })
    },
    // 分页器方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.getList();
    },
    // 点击换页面
     changeDetail(data){
       console.log(data)
      this.$router.push({
        name:"collect",
        query:{
          Mn:data,
          }
      })
      console.log()
    },
    // 鼠标移入移出
    aa(v){
      this.isborder = v
    }
  },
  mounted() {
    this.getId();
    this.getList()
  }
};
</script>

<style scoped>

.content-box > h2 {
  color: #37ddc0;
}
.realtime {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-center {
  width: 100%;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
  align-items: space-around; 
  margin-top: -5%;
}
.content-center .list-box {
  width: 13.6%;
  height: 32%;
  margin-left: 10px;
  border: 1px solid #207064;
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
}
 .list-boot ::v-deep{
    width: 100%;
    height: 20%;
    float: left;
    /* margin-left: 10%; */
}
.contrasname{
  color: rgba(255, 255, 255, 0.7);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-center .list-box > img {
  width: 100%;
  height: 80%;
}
.list-boot > span {
  color: rgba(255, 255, 255, 0.7);
  line-height: 20px;
  vertical-align: middle;
}
.list-boot[data-v-7e537f2c]{
  margin-left: 0px;
}
.address-box {
  font-size: 12px;
  color: #207064;
}
.address-box > p {
  display: inline-block;
  margin-top: 5px;
}
.content-top {
  width: 100%;
  height: 15%;
}
.content-bottom {
  width: 100%;
  height: 5%;
}
.page-box {
  float: right;
  display: flex;
  align-items: center;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
.realtime .isborder{
  border: 1px solid #37ddc0;
  box-sizing: border-box;
}
</style>